{% extends "store/base.html" %}
{% from "helpers/_flashes.html" import render_flashes %}

{% block title %}Purchase Ignite{% endblock %}

{% block head_js %}
    <script src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block body %}
<header class="bg-primary text-white hero-header">
    <div class="container text-center hero-text">
        <h4>Purchase Product</h4>
        <p>Limited time only: $50 off sale</p>
    </div>
</header>


<div class="root-container container">
     {{ render_flashes() }}

    <div class="row">
    <div class="col-md-5">
        <div class="card" style="width: 20rem;">
            <div class="card-header">
                Appname Product
            </div>
            <div class="card-body">
                <h4 class="card-title">
                    <span class="old-sale-text">$199</span>
                    <span class="new-sale-text">$149</span>
                </h4>
                <p class="card-text text-green">Includes the following features:</p>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <i class="fa fa-check icon-green" aria-hidden="true"></i>
                    Amazing Feature 1
                </li>
                <li class="list-group-item">
                    <i class="fa fa-check icon-green" aria-hidden="true"></i>
                    Amazing Feature 2
                </li>
            </ul>
            <div class="card-body">
                Money Back Guarantee
            </div>
        </div>
    </div>


    <div class="col-md-7">
        <h2> Appname </h2>

        <p> Purchase our incredible product ($149). </p>
        <form action="/store/payment" method="POST" class="stripe-checkout">
            <script src="https://checkout.stripe.com/checkout.js"
                class="stripe-button"
                data-key="{{ stripe_publishable_key }}" data-amount="14900"
                data-name="Ignite"
                data-description="Ignite Starter Code"
                data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                data-locale="auto"
                data-currency="usd"
                data-bitcoin="true"
                data-zip-code="true">
                </script>
                <button type="submit" class="btn btn-block btn-primary text-uppercase"> Purchase </button>
        </form>


    </div>
</div>
</div>


{% endblock %}